<template>
	<div class="modal_box">
		<span>
			扫一扫，分享哦！
		</span>
		<div class="modal" v-show="showModal" @click.stop="toggle">
		</div>
		<div id="qrcode" v-show="showModal" @click.stop="toggle"></div>
	</div>
</template>
<script>
// eslint-disable-next-line
/* eslint-disable */
export default {
	name: 'modal',
	props:　{
		showModal: {
			type: Boolean,
			default: false,
		}
	},
	data() {
		return {

		}
	},
	methods: {
		toggle() {
			this.$emit("toggle")
		}
	}
}
</script>

<style lang="scss" scoped>
@import "../../public/sass/var.scss";
.modal_box{
	span{
		display: inline-block;
		padding: 10px;
		text-align: center;
	}
	.modal{
		position: fixed;
		top: 0px;
		left: 0px;
		bottom: 0px;
		width: 100%;
		background-color: #666;
		opacity: 0.5;
		animation: changeshadow 0.5s  ease-in ;
		z-index: 1000;
	}
	#qrcode{
		position: fixed;
		top: 50%;
		left: 50%;
		transfrom: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		z-index: 1001; 
	}
}
@keyframes changeshadow{
	0%{ background-color: #fff;}  
    100%{ background-color: #666}  
}
</style>